<template>
    <!-- 登录模块 -->
    <div class="loginContainer">
        <!-- 导航栏 -->
        <my-nav-bar></my-nav-bar>
        <!-- 表单 -->
        <van-cell-group>
            <van-field
                v-model="loginForm.username"
                required
                clearable
                label="用户名"
                right-icon="question-o"
                placeholder="请输入用户名"
                @click-right-icon="$toast('这里是提示')"
            />

            <van-field
                v-model="loginForm.password"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
            />
        </van-cell-group>
        <!-- 登录按钮 -->
        <my-button 
            btnMsg="登录"
            loading-text="登录中"
            size="large"
            type="primary"
            @btnClick="toLogin(loginForm)"
        ></my-button>
    </div>
</template>

<script>
// 引入 公共组件
import MyButton from 'Components/common/MyButton'
import MyNavBar from 'Components/common/MyNavBar'
import { Notify } from 'vant';

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        // 登录按钮的逻辑
        toLogin(form) {
            console.log('这是表单信息 =>')
            console.log(form)
            if (!/^[A-Za-z0-9]{1,17}$/.test(form.username)) {
                Notify({
                    message: '账号不能为空且长度不得大于17位',
                    duration: 1000
                })
                return
            }
            if (!/^[\d_a-zA-Z]{8,17}$/.test(form.password)) {
                Notify({
                    message: '密码长度要大于8位小于17位，由数字和字母组成',
                    duration: 1000
                })
                return
            }
        }
    },
    components: {
        MyButton,
        MyNavBar
    }
}
</script>

<style lang="stylus">
    @import '~Css/_layout.styl'
    // 登录模块
    .loginContainer
        margin-top $navBarTop
        flex $commonHight
        // 登录按钮
        .loginBtnWarp
            display flex
            justify-content center
</style>
